<template>
	<view class="search com-center">
		<view class="search-head">
			<view class="head-cont flex">
				<image src="../../../static/navigateBack.png" mode="widthFix" style="width: 80rpx;"></image>
				<image src="../../../static/searchs.png" mode="widthFix" style="width: 50rpx;position: absolute;left: 90rpx;top: 10rpx;overflow: hidden;"></image>
				<input class="text" type="text" :placeholder="text" v-model='newId' id='inputId' />
			</view>
			<input class="but" type="button" value="搜索" >
		</view>
		<view class="search-cont com-center">
			<!-- 历史记录 -->
			<view class="history">
				<view class="history-title flex">
					历史记录
					<image src="../../../static/delete.png" mode="widthFix" style="width: 90rpx;"></image>
				</view>
				<view class="history-cont">
					<view class="history-items flex">
						<image src="../../../static/historyGps.png" mode="widthFix" style="width: 35rpx;margin: 13rpx;"></image>
						00
					</view>
				</view>
			</view>
			<!-- 数据加载中...... -->
			<view class="ing">
				数据加载中......
			</view>
			<!-- 附近的品牌油站 -->
			<view class="nearby">
				<view class="nearby-title">
					附近的品牌油站
				</view>
				<view class="nearby-list com-center" style="width: 90%;">
					<!-- 列表标题 -->
					<view class="list-title">
						泰安服务区东区加油站
					</view>
					<!-- 列表地址 -->
					<view class="list-titles flex">
						<view class="titles-left">泰安服务区</view>
						<view class="titles-right flex">
							<image src="../../../static/address.png" mode="widthFix" style="width: 35rpx;margin-top: 5rpx;"></image>
							4.22km
						</view>
					</view>
					<!-- 列表价格 -->
					<view class="price flex">
						￥<view class="big-font">7.69</view>/L
						<view class="small-price">油站价￥8.17/L</view>
					</view>
					<!-- 列表价格下 -->
					<view class="price-bottom flex">
						<view class="price-bottom-left">
							<view class="left-top flex">
								完单返加油金<view class="font-red">0.50</view>/升
							</view>
							<view class="left-bottom flex" v-if="flase">
								<!-- 累计消费 -->
								<view class="profit-return">
									累计消费返豪礼
								</view>
								<!-- 加油险 -->
								<view class="lnsurance">
									加油险
								</view>
							</view>
						</view>
						<!-- 立即加油 -->
						<view class="price-bottom-right flex">
							立即加油<image src="../../../static/turnright.png" mode="widthFix" style="width: 20rpx;margin-top: 16rpx;"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				newId: '',
				text:'搜索油站名称/地址'
			}
		},
		methods: {

		},
		mounted () {
		document.getElementById('inputId').focus()
		}
	}
</script>

<style>
	*{margin: 0;padding: 0;}
	image{display: block;}
	.com-center{width: 98%;margin: 0 auto;}
	.flex{display: flex;}
	.search-head{position: relative;}
	.head-cont{margin-top: 40rpx;position: relative;}
	.head-cont .text{background-color: #fff;border-radius: 40rpx;padding: 16rpx 65rpx;width: 360rpx;font-size: 30rpx}
	 .but{background-color: #EBEDF2;color: #808080;border-radius: 40rpx;width: 100rpx;text-align: center;font-size: 26rpx;padding: 5rpx 10rpx;position: absolute;top: 12rpx;right: 180rpx;}
	 .history-title{justify-content: space-between;font-weight: bold;margin: 40rpx auto;padding-left: 40rpx;}
	 .history-cont{background-color: #fff;padding: 40rpx;border-radius: 35rpx;}
	 .history-items{background-color: #F6F7FA;border-radius: 10rpx;font-size: 26rpx;line-height: 60rpx;height: 60rpx;color: #666666;width: 100rpx;}
	 .ing{color: #A6A6A6;font-size: 28rpx;text-align: center;padding-top: 70rpx;}
	 /* 精选内容 */
	 .selected-cont {
	 	margin: 10rpx auto;
	 }
	 .nearby-title{justify-content: space-between;font-weight: bold;margin: 40rpx auto 0;padding-left: 40rpx;}
	 
	 /* 列表 */
	 .nearby-list {
	 	border-radius: 20rpx;
	 	background-color: #fff;
	 	padding: 30rpx;
	 	margin: 20rpx auto;
	 }
	 
	 .list-title {
	 	font-size: 38rpx;
	 	font-weight: bold;
	 }
	 
	 .list-titles {
	 	font-size: 26rpx;
	 	color: #666;
	 	justify-content: space-between;
	 	margin: 10rpx 0;
	 }
	 
	 .titles-right {
	 	background-color: #F7F9FA;
	 	border-radius: 20rpx;
	 	overflow: hidden;
	 	padding: 0 5rpx;
	 }
	 
	 .price {
	 	font-size: 20rpx;
	 	align-items: flex-end;
	 	color: #F31C3C;
	 	font-weight: bold;
	 }
	 
	 .big-font {
	 	font-size: 38rpx;
	 }
	 
	 .small-price {
	 	color: #A3A3A3;
	 	font-size: 26rpx;
	 	font-weight: normal;
	 	margin-left: 10rpx;
	 }
	 
	 .price-bottom {
	 	justify-content: space-between;
	 	align-items: flex-end;
	 }
	 
	 .price-bottom-left {
	 	font-size: 24rpx;
	 	margin-top: 15rpx;
	 }
	 
	 .left-top {
	 	background-color: #FFDAA8;
	 	color: #8B4000;
	 	border-radius: 10rpx;
	 	width: 240rpx;
	 	padding: 0 10rpx;
	 }
	 
	 .font-red {
	 	color: #F31C3C;
	 	font-weight: bold;
	 	font-size: 28rpx
	 }
	 
	 .left-bottom {
	 	margin-top: 15rpx;
	 }
	 
	 .profit-return {
	 	color: #D49F57;
	 	border: #D49F57 1px solid;
	 	padding: 0 10rpx;
	 	border-radius: 10rpx;
	 }
	 
	 .lnsurance {
	 	color: #A39D9D;
	 	border: #A39D9D 1px solid;
	 	padding: 0 10rpx;
	 	border-radius: 10rpx;
	 	margin-left: 10rpx;
	 }
	 
	 .price-bottom-right {
	 	background-color: #F7F9FA;
	 	border-radius: 20rpx;
	 	font-weight: bold;
	 	height: 65rpx;
	 	line-height: 65rpx;
	 	padding: 0 10rpx;
	 	font-size: 30rpx
	 }
</style>